<template>
  <div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item label="本品">
        <el-cascader
        :options="options2"
        @change="getId0"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择本品"
      ></el-cascader>
      </el-form-item>
      <el-form-item label="竞品">
        <el-cascader
        :options="options2"
        @change="getId1"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择竞品1"
      ></el-cascader>
      <el-cascader
        :options="options2"
        @change="getId2"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择竞品2"
      ></el-cascader>
      <el-cascader
        :options="options2"
        @change="getId3"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择竞品3"
      ></el-cascader>
      <el-cascader
        :options="options2"
        @change="getId4"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择竞品4"
      ></el-cascader>
      </el-form-item>
      <div style="padding-left: 80px;">
        <el-button type="primary" icon="el-icon-search" @click="search" :loading='action' class="search">搜索</el-button>
      </div>
    </el-form>
    <v-mmbar :chartsId="item1.chartid" :key="item1.key" :data="item1.data" :val="item1.val" :name="item1.name"></v-mmbar>
    <v-priceMap :chartsId="item2.chartid" :key="item2.key" :data="item2.data" :val="item1.val" :name="item1.name" @upup="change"></v-priceMap>
    <v-priceLine :chartsId="item3.chartid" :key="item3.key" :data="item3.data" :val="item1.val" :name="item1.name"></v-priceLine>
    <v-priceBigScatter :chartsId="item5.chartid" :key="item5.key" :data="item5.data" :val="item1.val" :name="item1.name"></v-priceBigScatter>
    <v-priceScatter :chartsId="item4.chartid" :key="item4.key" :data="item4.data" :val="item1.val" :name="item1.name"></v-priceScatter>
  </div>
</template>
<style lang="scss">
    .el-button.search{
      background-color: #2bba8e;
      border-color: #2bba8e;
    }
</style>

<script>
import Mmbar from '@/components/views/chart/mmbar'
import PriceMap from '@/components/views/chart/price_map'
import PriceLine from '@/components/views/chart/price_line'
import PriceScatter from '@/components/views/chart/price_scatter'
import PriceBigScatter from '@/components/views/chart/price_big_scatter'
  export default {
    data() {
      return {
        action: false,
        item1:{
          itemId: 1,
          chartid: 'myChart1',
          key: 1,
          val: [],
          data:[],
          name: []
        },
        item2:{
          itemId: 2,
          chartid: 'myChart2',
          key: 2,
          val: 2,
          children: {}
        },
        item3:{
          itemId: 3,
          chartid: 'myChart3',
          key: 3,
          val: 3,
          data: {}
        },
        item4:{
          itemId: 4,
          chartid: 'myChart4',
          key: 4,
          val: 4,
          data: []
        },
        item5:{
          itemId: 5,
          chartid: 'myChart5',
          key: 5,
          val: 5,
          data: []
        },
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '丰田，宝马',
          type: ''
        },
        options2: [],
        props: {
          value: 'id',
          label: 'name',
          children: 'next'
        },
        chexi:{},
        chekuan: {},
        value0: [],
        value1: [],
      };
    },
    components: {
      'v-mmbar': Mmbar,
      'v-priceMap': PriceMap,
      'v-priceLine': PriceLine,
      'v-priceScatter': PriceScatter,
      'v-priceBigScatter': PriceBigScatter,
    },
    created(){
      //给后台传id-------气泡图
        // $.ajax({
        //     url: 'gz/getRelaCityDisCountsD',
        //     success: function(data){
        //       console.log('气泡: ', data);
        //         self.action = false;
        //         self.item5.data = data;
        //     },
        //     error: function(){
        //         self.action = false;
        //     }
        // })
      //给后台传id-------散点图
        // $.ajax({
        //     url: 'gz/getCitySalesAvgDisCountsD',
        //     success: function(data){
        //       console.log('散点: ', data);
        //         self.action = false;
        //     },
        //     error: function(){
        //         self.action = false;
        //     }
        // })
      let self = this;
      //获取品牌
      function getB(){
        return self.$http.get('gz/getBrand');
      }
      //获取车系
      function getS(){
        return self.$http.get('gz/getSeries');
      }
      //获取车款
      function getC(){
        return self.$http.get('gz/getCarsType');
      }
      this.$http.all([getB(), getS(), getC()])
      .then(self.$http.spread(function (b, s, c) {
        // 获取品牌，车系，车款后，填入数组
        let pinpai = b.data.BrandList;
        let chexi = s.data.SeriesList;
        self.chexi = chexi;
        let chekuan = c.data.CarsTypeList;
        self.chekuan = chekuan;
        for(let i = 0; i< chexi.length; i++){
          chexi[i].next = [];
          let id = chexi[i].id;
          for(let j = 0; j < chekuan.length; j++){
            if(chekuan[j].parentId == id){
              chexi[i].next.push(chekuan[j]);
            }
          }
        }
        for(let i = 0; i < pinpai.length; i++){
          pinpai[i].next = [];
          let id = pinpai[i].id;
          for(let j = 0; j < chexi.length; j++){
            if(chexi[j].parentId == id){
              pinpai[i].next.push(chexi[j]);
            }
          }
        }
        self.options2 = pinpai;
      }));
      //获取价格优惠区间data
      // this.$http.get('gz/getDiscounts')
      // .then((res)=>{
      //   this.item1.data = res.data;
      // })
      // .catch((error)=>{
      //   console.log(`这是个错误提示${error}`);
      // })
    },
    methods: {
      change(data){
        this.item3.data = data;
      },
      getId0(val){
        this.value0[0] = val[2];
        //获取到默认选择的竞品
        // this.$http.get('gz/brandCompare',{
        //   params: {
        //     ID: val[1]
        //   }
        // })
        // .then((res)=>{
        //   console.log('res: ', res);
        // })
      },
      getId1(val){
          this.value1[0] = val[2];
      },
      getId2(val){
          this.value1[1] = val[2];
      },
      getId3(val){
          this.value1[2] = val[2];
      },
      getId4(val){
          this.value1[3] = val[2];
      },
      search(){
          let self = this;
          this.action = true;//loading状态
          //去空
          for(let i = 0; i < this.value1.length; i++){
            if(this.value1[i] == undefined){
              this.value1.splice(i, 1);
              i = i - 1;//因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，
            }
          }
          //校验输入
          if(this.value0.length == 0 || this.value1.length == 0){
            this.open4();
            this.action = false;
            return;
          }
          //生成本品加竞品的id
          let arr = [];
          arr = arr.concat(this.value0, this.value1);
          let Sname = [];
          for(let i = 0; i < arr.length; i++){
            for(let j = 0; j < self.chekuan.length; j++){
              if(self.chekuan[j].id == arr[i]){
                let parentId = self.chekuan[j].parentId;
                for(let q = 0; q < self.chexi.length; q++){
                  if(self.chexi[q].id == parentId){
                    Sname.push(self.chexi[q].name);
                  }
                }
              }
            }
          }
          this.item1.val = arr;
          this.item1.name = Sname;
          //给后台传id-------价格优惠
          $.ajax({
              url: 'gz/getDiscounts',
              data: {
              typeId: arr
              },
              traditional: true,
              success: function(data){
                  // self.action = false;
                  self.item1.data = data;
              },
              error: function(){
                  self.action = false;
              }
          })
          //给后台传id-------优惠地图
          $.ajax({
            url: 'gz/getProvinceDisCounts',
            data: {
              typeId: arr
            },
            traditional: true,
            success: function(data){
                // self.action = false;
                self.item2.data = data;
            },
            error: function(){
                self.action = false;
            }
        })
        //给后台传id-------气泡图
        $.ajax({
            url: 'gz/getRelaCityDisCounts',
            data: {
              typeId: arr
            },
            traditional: true,
            success: function(data){
                self.action = false;
                self.item5.data = data;
            },
            error: function(){
                self.action = false;
            }
        })
        //给后台传id-------散点图
        $.ajax({
            url: 'gz/getCitySalesAvgDisCounts',
            data: {
              typeId: arr
            },
            traditional: true,
            success: function(data){
              self.item4.data = data;
              self.action = false;
            },
            error: function(){
                self.action = false;
            }
        })
      },
      open4() {
        this.$message({
          showClose: true,
          message: '请选择本品以及竞品',
          type: 'error',
          duration: '1500'
        });
      },
    }
  };
</script>
